<template>
  <el-table-column
    :prop="prop"
    :label="label"
    :type="type"
    :sortable="sortable ? 'custom' : false"
    align="center"
    :width="columnWidth"
    :fixed="fixed"
    :resizable="false"
  >
    <template v-if="$slots.default" #default="scope">
      <slot v-bind="scope"></slot>
    </template>
  </el-table-column>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps<{
  prop?: string;
  label?: string;
  type?: string;
  sortable?: boolean;
  width?: string;
  fixed?: string;
  auto?: boolean; // 是否不根据标题字数控制宽度
}>();

const columnWidth = computed(() => {
  if(props.auto || props.width) return props.width;
  if(props.label) {
   // 表头每个字算作15宽度 加上组件的padding和排序图标的宽度
    return (props.label.length) * 15 + 24 + 24 + 'px';
  }
});
</script>
